<template>
	<view id="account-bind-status">
		<view class="btn-row" v-if="type == 1">
			<button class="sumbit-btn" @tap="addBindTaoBao">新增更新淘宝号</button>
			<button class="sumbit-btn" @tap="bindindex">马上去抢单</button>
		</view>
		<view class="card">
			<view class="tou">
				注意事项：
			</view>
			<view class="describe" v-if="type == 1">
				<p>1.淘宝禁止使用淘客等返利，违规将扣除本单佣金，并且赔付本金的2.5%给商家；</p>
				<p>2.使用花呗、信用卡、京东白条等支付的，赔付商家1%的本金；</p>
				<p>3.必须严格按照商家的要求做单，这样你的号也不容易降权。没按照商家要求做单的，取消佣金，做降级处理；</p>
				<p>4.禁止联系商家，禁止发平台做单截图给商家，违规封号处理。有急事联系师傅或者找平台客服</p>
				<p>5，改过淘宝账户的，请勿使用，无法提交任务。</p>

			</view>
			<view class="describe" v-if="type == 3">
				<p>1.京东白条等支付的，赔付商家1%的本金；</p>
				<p>2.必须严格按照商家的要求做单，这样你的号也不容易降权。没按照商家要求做单的，取消佣金，做降级处理；</p>
				<p>3.禁止联系商家，禁止发平台做单截图给商家，违规封号处理。有急事联系师傅或者找平台客服</p>
			</view>
			<view class="describe" v-if="type == 15">
				<p>1.拼多多禁止使用拼多多平台优惠券，违规者，赔付商家10倍的优惠券金额，造成商家损失过大的，商家会找上门亲自处理；</p>
				<p>2.使用花呗、信用卡等支付的，赔付商家1%的本金；</p>
				<p>3.必须严格按照商家的要求做单，这样你的号也不容易降权。没按照商家要求做单的，取消佣金，做降级处理；</p>
				<p>4.禁止联系商家，禁止发平台做单截图给商家，违规封号处理。有急事联系师傅或者找平台客服</p>
			</view>
			<view class="describe" v-if="type == 13">
				<p>1.唯品会有收到实物的麻烦联系客服寄回，可补上寄回的快递费和佣金。</p>
				<p>2.必须严格按照商家的要求做单，这样你的号也不容易降权。没按照商家要求做单的，取消佣金，做降级处理；</p>
				<p>3.禁止联系商家，禁止发平台做单截图给商家，违规封号处理。有急事联系师傅或者找平台客服</p>
			</view>
            <view class="describe" v-if="type == 20">
                <p>1.抖音有收到实物的麻烦联系客服寄回，可补上寄回的快递费和佣金。</p>
                <p>2.必须严格按照商家的要求做单，这样你的号也不容易降权。没按照商家要求做单的，取消佣金，做降级处理；</p>
                <p>3.禁止联系商家，禁止发平台做单截图给商家，违规封号处理。有急事联系师傅或者找平台客服</p>
            </view>
            <view class="describe" v-if="type == 21">
                <p>1.必须严格按照要求做单，没按照要求做单的，取消佣金，做降级处理；</p>
                <p>2.必须严格按照要求做评论、点赞、收藏，按要求截图上传；</p>
                <p>3.禁止小红书私聊，骚扰，禁止发平台做单截图给商家，违规封号处理。有急事联系师傅或者找平台客服</p>
            </view>
		</view>
		<view style="margin: 0 34upx; margin-top: 20upx">
			<TableImage
					:table-title="tableTitle"
					:list-data="listData">
				<template #left="slotProps">
					<text>{{slotProps.data.center.length >5 ? (slotProps.data.center.slice(0, 5) + "...") : slotProps.data.center}}</text>
				</template>
				<template #center="slotProps">
					<image style="width: 70upx; height: 70upx; background-color: #eeeeee;"
						   :src="slotProps.data.left.icon"></image>
					<text v-if="slotProps.data.left.value">{{slotProps.data.left.value}}</text>
				</template>
				<template #right="slotProps">
					<text v-if="slotProps.data.left.value == '安全员审核失败'|| slotProps.data.left.value == '自动审核失败'">
						<button type="default" @click="goto(slotProps.data.center)" class="sumbit-btn update-btn">更新信息</button>
					</text>
					<text v-else>{{slotProps.data.right}}</text>
				</template>
			</TableImage>
		</view>
		<view class="binding-wrap">
			<!--<view class="header" v-if="type == 1">
				<image :src="statusImg[bindStatus]" mode=""></image>
			</view>
			<view class="header" v-else>
				<image :src="otherStatusImg[bindStatus]" mode=""></image>
			</view>
			<view class="titie">
				<text>{{statusText}}</text>
			</view>
			<view class="Tips">
				<text v-if="remark">{{remark}}</text><br>
				<text>当前账号绑定{{typeName}}账号<span style="color: red;">{{platform_name}}</span></text>
			</view>-->
			<view class="user" v-if="false">是否抢{{typeName}}的单子 <view class="color">
					<switch checked :checked="hadOpen" @change="bindOpen" />
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		apiCheckBindPlatform,
		apiOpenClosePlatformStatus
	} from '../../../http/apis.js';
	import { mapState } from 'vuex';

	import TableImage from "../../components/table/TableImage.vue";

	export default {
		computed: {
			...mapState(['token'])
		},
		data() {
			return {
				tb_limit: '',// 是否可以绑定淘宝号，0：不能新增；1：可以新增
				tableTitle: ["绑定淘宝", "审核状态", "审核备注"],
				listData: [
					/*{
						id: 1,
						left: {
							icon: "../../static/img/success_icon.png",
							value: "审核状态"
						},
						center: "center",
						right: "right"
					},*/
				],
				hadOpen:false,
				account:'',
				statusImg:{
					1: '../../static/img/write_icon.png',
					2: '../../static/img/synchronize_icon.png',
					3: '../../static/img/check_icon.png',
					4: '../../static/img/success_icon.png',
					5: '../../static/img/fail_icon.png',
					6: '../../static/img/fail_icon.png'
				},
				otherStatusImg:{
					1: '../../static/img/success_icon.png',
					3: '../../static/img/check_icon.png',
					2: '../../static/img/fail_icon.png',
				},
				bindStatusObject: {
					1: '待填写订单',
					2: '待同步订单',
					3: '待安全员审核',
					4: '安全员审核成功',
					5: '安全员审核失败',
					6: '自动审核失败'
				},
				otherBindStatus:{
					1: '审核成功',
					2: '审核失败',
					3: '待安全员审核'
				},
				platform_name: '',
				bindStatus: 0,
				statusText: '',
				remark: '',
				type: '',
				typeName: '',
				typeData: {
					1: '淘宝',
					3: '京东',
					13: '唯品会',
					15: '拼多多',
                    20: '抖音',
                    21: '小红书'
				}
			};
		},
		onLoad(e) {
			this.type = e.type
			this.typeName = this.typeData[this.type]
            this.tableTitle = ["绑定"+this.typeName,"审核状态", "审核备注"]
		},
		onShow() {
			this.getCheckBindPlatform()
		},
		methods:{
			goto(tbAccount) {
				uni.navigateTo({
					url: `../bindInfo/bindTbAccountxl?type=again&tbAccount=${tbAccount}`
				})
			},
			getCheckBindPlatform() {
				apiCheckBindPlatform({
					token: this.token,
					platformType: this.type
				}).then(res =>{
					if(res.data.code == 1)  {
						this.tb_limit = res.data.tb_limit// 是否可以绑定淘宝号，0：不能新增；2：可以新增
						this.listData = res.data.msg.map(item => {
							this.platform_name = item.platform_name// 绑定的昵称
							this.bindStatus = item.status
							// type: 1淘宝
							this.statusText = this.type == 1 ? this.bindStatusObject[this.bindStatus] : this.otherBindStatus[this.bindStatus]
							this.remark = item.remark
							return {
								id: item.id,
								left: {
									icon: this.statusImg[item.status],
									value: this.statusText
								},
								center: item.platform_name,
								right: this.remark
							}
						})
						/*this.platform_name = res.data.msg.platform_name
						this.hadOpen = res.data.msg.order_status == 1 ? true : false
						this.bindStatus = res.data.msg.status
						this.statusText = this.type == 1 ? this.bindStatusObject[this.bindStatus] : this.otherBindStatus[this.bindStatus]
						this.remark = res.data.msg.remark*/
					} else if (res.data.code == -1) {
						this.tb_limit = -1
					} else {
						this.$msg.showToast(res.data.msg)
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			bindOpen(){
				apiOpenClosePlatformStatus({
					token: this.token,
					platformType: this.type
				}).then(res =>{
				    this.$msg.showToast(res.data.msg)
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			// 绑定淘宝账号
			addBindTaoBao() {
				if (this.tb_limit == 1 || this.tb_limit == -1) {
					// 是否可以绑定淘宝号，0：不能新增；1：可以新增
					uni.navigateTo({
						url: "../bindInfo/bindTbAccountxl?type=init",
					});
				} else {
					this.$msg.showToast("绑号已达上限")
				}
			},
			bindindex(){
				uni.switchTab({
					url: '../home/home'
				});
			}
		},
		components: {
			TableImage
		}
	}
</script>

<style lang="scss">
	#account-bind-status {
		font-size: 15px;
		.binding-wrap{
			margin: 20upx;
			padding: 20upx 0;
			background: #FFFFFF;
		}
		.user {
			padding: 20upx ;
			display: flex;
			height: 80upx;
			align-items: center;
			font-size: 30upx;
			justify-content: space-between;
		}
	.primary{
		width: 70%;
		background: cornflowerblue;
		margin:20upx auto;
		color: #FFFFFF;

	}
		.card {
			width: 90%;
			display: flex;
			margin: auto;
			background: #F5F5F5;
			padding: 20upx 0;
			flex-direction: column;
			color:#F06837;
			border-radius: 10upx;
			.tou {
				margin-left: 20upx;
			}

			.describe {
				margin: 10upx 10upx 10upx 50upx;
				;
			}
		}

		.Tips{
			text-align: center;
			font-size: upx;
			padding: 20upx 0;
			color:#999999;
		}

		.titie {
			text-align: center;
			font-size: 30upx;
			font-weight: 600;
		}

		.header {
			width: 150upx;
			height: 150upx;
			border-radius: 50%;
			margin: 30upx auto 10upx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;

			}
		}
		.btn-row {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
		}
		.sumbit-btn {
			flex: 1;
			margin: 32upx;
			height: 96upx;
			background: $theme-background-color;
			border-radius: 10upx;
			font-size: 32upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 96upx;
			margin-top: 48upx;
			&.update-btn {
				height: 40px;
				line-height: 40px;
				font-size: 24upx;
			}
		}
	}
</style>

